import { defineStore } from "pinia";
import { ref, computed } from "vue";
import type TiledMap from "tiled-types";
import { getScreenSize } from "@/utils";

export const useMapStore = defineStore("map", () => {
  // 地图数据
  const currentMap = ref<TiledMap | null>(null);
  const currentCtx = ref<CanvasRenderingContext2D | null>(null);
  const currentMapPath = ref<string>("");

  // 地图尺寸相关状态
  const mapWidth = ref(0); // 地图宽度（瓦片数量）
  const mapHeight = ref(0); // 地图高度（瓦片数量）
  const tileWidth = ref(0); // 瓦片宽度（像素）
  const tileHeight = ref(0); // 瓦片高度（像素）

  // 地图实际像素尺寸
  const mapPixelWidth = computed(() => mapWidth.value * tileWidth.value);
  const mapPixelHeight = computed(() => mapHeight.value * tileHeight.value);

  const updateMapData = (map: TiledMap) => {
    currentMap.value = map;
    mapWidth.value = map.width;
    mapHeight.value = map.height;
    tileWidth.value = map.tilewidth;
    tileHeight.value = map.tileheight;
  };

  return {
    mapWidth,
    mapHeight,
    tileWidth,
    tileHeight,
    currentCtx,
    currentMap,
    mapPixelWidth,
    mapPixelHeight,
    currentMapPath,
    updateMapData,
  };
});
